<template>
  <div class="post-feed">
    <!-- 发布动态 -->
    <div class="create-post">
      <el-card shadow="hover">
        <div class="post-input">
          <el-input
            type="textarea"
            v-model="newPostContent"
            placeholder="分享你的动态..."
            rows="4"
          ></el-input>
        </div>
        <div class="post-actions">
          <el-button type="primary" @click="postNewContent">发布</el-button>
        </div>
      </el-card>
    </div>

    <!-- 动态列表 -->
    <div class="posts-list">
      <el-card v-for="(post, index) in posts" :key="index" class="post-item" shadow="hover">
        <div class="post-header">
          <el-avatar :src="post.avatar" size="medium"></el-avatar>
          <div class="post-user-info">
            <div class="post-username">{{ post.username }}</div>
            <div class="post-time">{{ post.time }}</div>
          </div>
        </div>
        <div class="post-content">{{ post.content }}</div>
        <div class="post-actions">
          <el-button @click="likePost(index)">赞
            <i class="el-icon-like"></i>
            {{ post.likes }}
          </el-button>
          <el-button @click="toggleComments(index)">
            <i class="el-icon-chat-line-round"></i>
            评论 ({{ post.comments.length }})
          </el-button>
        </div>
        <div v-if="post.showComments" class="comments-section">
          <div class="comment-item" v-for="(comment, cIndex) in post.comments" :key="cIndex">
            <el-avatar :src="comment.avatar" size="small"></el-avatar>
            <div class="comment-content">
              <div class="comment-username">{{ comment.username }}</div>
              <div class="comment-text">{{ comment.text }}</div>
            </div>
          </div>
          <div class="add-comment">
            <el-input
              v-model="post.newComment"
              placeholder="添加评论..."
              size="small"
            ></el-input>
            <el-button type="text" @click="addComment(index)">评论</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newPostContent: '',
      posts: [
        {
          username: 'User',
          avatar: 'src/assets/images/wl.png',
          time: '刚刚',
          content: '这是我的第一条动态！',
          likes: 0,
          comments: [],
          showComments: false,
          newComment: '',
        },
        // 可以添加更多初始动态
      ],
    };
  },
  methods: {
    postNewContent() {
      if (this.newPostContent.trim() === '') return;

      const newPost = {
        username: 'User',
        avatar: 'src/assets/images/wl.png', // 替换为实际的头像URL
        time: '刚刚',
        content: this.newPostContent,
        likes: 0,
        comments: [],
        showComments: false,
        newComment: '',
      };

      this.posts.unshift(newPost);
      this.newPostContent = '';
    },
    likePost(index) {
      this.posts[index].likes += 1;
    },
    toggleComments(index) {
      this.posts[index].showComments = !this.posts[index].showComments;
    },
    addComment(index) {
      if (this.posts[index].newComment.trim() === '') return;

      const newComment = {
        username: 'User',
        avatar: 'src/assets/images/wl.png', // 替换为实际的头像URL
        text: this.posts[index].newComment,
      };

      this.posts[index].comments.push(newComment);
      this.posts[index].newComment = '';
    },
  },
};
</script>

<style scoped>
.post-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #f5f5f5;
}

.create-post {
  width: 60%;
  margin-bottom: 20px;
}

.post-input {
  margin-bottom: 10px;
}

.post-actions {
  display: flex;
  justify-content: flex-end;
}

.posts-list {
  width: 60%;
}

.post-item {
  margin-bottom: 20px;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-user-info {
  margin-left: 10px;
}

.post-username {
  font-weight: bold;
}

.post-time {
  color: #999;
  font-size: 12px;
}

.post-content {
  margin-bottom: 10px;
}

.comments-section {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.comment-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-content {
  margin-left: 10px;
}

.comment-username {
  font-weight: bold;
  margin-right: 5px;
}

.comment-text {
  color: #666;
}

.add-comment {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.add-comment el-input {
  flex: 1;
  margin-right: 10px;
}
</style>
